<template>
  <div class="app-container" align="center" style="width: 1300px">
    <div :style="{width: '80%'}">
      <el-card class="filter-container" shadow="hover" :style="{marginBottom: '10px'}">
        <div align="center">
          <div :style="{width: '90%'}">
            <el-select v-model="keyword" placeholder="请选择" :style="{marginLeft: '100px', width: '9%', float: 'left'}">
              <el-option v-for="(item, index) in keywordOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
            <el-input v-model="queryInfo[keyword]" placeholder="请输入" clearable
                      :style="{width: '60%', margin: '1px', float: 'left'}">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="getDataList()"
                       :style="{marginLeft: '10px', float: 'left'}" round>查询
            </el-button>
          </div>
        </div>
      </el-card>

      <el-row type="flex" justify="center" align="top">
        <el-col :span="12">
          <div align="center">
            <el-card
              :hidden="isHidden"
              class="friend-card"
              align="center"
              shadow="hover"
            >
              <div align="center">
                <el-table
                  ref="tableList"
                  v-loading="listLoading"
                  :data="datalist"
                  style="width: 100%"
                >
                  <el-table-column label="搜索结果" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="5">
                          <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                        </el-col>
                        <el-col :span="10">
                          <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                          <div class="text-brief" align="start">{{scope.row.signature}}</div>
                        </el-col>
                        <el-col :span="9">
                          <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                            <el-button icon="el-icon-user" @click="showCardDialog(scope.row)" circle></el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="添加好友" placement="bottom">
                            <el-button icon="el-icon-plus" @click="friendRequest(scope.row.id)" circle></el-button>
                          </el-tooltip>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination-container">
                <el-pagination
                  :style="{width: '100%'}"
                  background
                  layout="prev, pager, next"
                  :page-size="queryInfo.pageSize"
                  :current-page.sync="queryInfo.pageNum"
                  :total="queryInfo.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 对话框 -->
    <el-dialog title="名片" :visible.sync="cardDialogVisible" width="700px" @close="cardDialogVisible = false">
      <!-- 内容主体 -->
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div class="block">
            <el-avatar :size="80" :src="cardInfo.avatar"></el-avatar>
          </div>
          <div style="padding: 14px;">
            <div class="text-nickName" :style="{marginBottom: '10px'}">{{cardInfo.nickName}}</div>
            <div class="text-brief-long">{{cardInfo.signature}}</div>
            <el-tag size="small" type="success" class="card-tag">{{cardInfo.profession}}</el-tag>
            <el-tag size="small" class="card-tag">{{ cardInfo.gender === 1 ? '男' : '女' }}</el-tag>
            <div class="text-info">职业：{{cardInfo.profession}}</div>
            <div class="text-info">生日：{{cardInfo.birthday}}</div>
            <div class="text-info">手机：{{cardInfo.phone}}</div>
            <div class="text-info">邮箱：{{cardInfo.email}}</div>
            <div slot="footer" align="center">
              <el-button type="primary" round size="small" @click="friendRequest(cardInfo.id)">发送好友请求</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      keyword: "nickName",
      isHidden: true,
      rules: {
        keyword: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        queryInfo: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      },
      keywordOptions: [{
        "label": "昵称",
        "value": "nickName"
      }, {
        "label": "账号",
        "value": "account"
      }],
      cardInfo: {},
      // 获取用户列表查询参数对象
      queryInfo: {
        id: '',
        nickName: '',
        account: '',
        // 当前页数
        pageNum: 1,
        total: 1,
        // 每页显示多少数据
        pageSize: 5
      },
      datalist: [],
      listLoading: false,
      // 对话框
      cardDialogVisible: false,

    }
  },
  methods: {
    getDataList() {
      this.isHidden = false
      this.listLoading = true
      // this.getList(this.queryInfo)
      const params = this.queryInfo
      params.id = this.user.id
      request({
        url: '/user/pageNoFriendUser',
        method: 'get',
        params
      }).then(response => {
        this.datalist = response.data.records
        console.log(response.data)
        this.queryInfo.total = response.data.total
        this.listLoading = false
      })
    },
    handleResetSearch() {
      this.queryInfo['query'] = {}
      this.getDataList()
    },
    // 显示对话框
    showCardDialog(row) {
      console.log(row)
      this.cardInfo = row
      this.cardDialogVisible = true
    },

    // 发送好友请求
    async friendRequest(id){
      const confirmResult = await this.$confirm(
        '确定向该用户发送好友请求吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      // return this.$message.info('已取消')
      if (confirmResult === 'confirm') {
        // return this.$message.info('发送成功！')
        const params = {}
        params.userId = this.user.id
        params.recommendId = this.user.id
        params.friendId = id
        params.reference = this.user.nickName
        params.recommendRank = 0
        params.toRank = 1
        request({
          url: '/recommend/sendFriendRequest',
          method: 'get',
          params
        }).then(response => {
          if (response.retCode !== '200') return this.$message.error(response.retMsg)
          this.$message.success('发送请求成功！')
          // this.getDataList()
        })
      }
    },
    // 监听 pagesize改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getDataList()
    },
    // 监听 页码值 改变事件
    handleCurrentChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageNum = newSize
      this.getDataList()
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
